Text with onPress or onLongPress handler is not accessible with TalkBack #34284
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
>Finally, the last catch relates to why these views are considered focusable. We've been working with the assumption that they are only focusable because accessible="true", but this is not the only property that can make a view focusable on Android. Android also makes all elements with onClick listeners or onLongPress listeners focusable, as well as a bunch of other less-clear edge cases. If our layout looked like this: adding onPress handler to a Text Component does not call setClickable(true) ([test case](facebook#30851 (comment))) facebook#30851 (comment) verify if the accessible prop does not work on other components * Pressable, TouchableOpacity, Switch, TextInput, and TouchableNativeFeedback are focusable/accessible by default without an onPress handler * `<TouchableOpacity>` is accessible, `<TouchableOpacity accessible={false}>` is not accessible, `<TouchableOpacity accessible={false} onPress={() => console.log('pressed')}>` is accessible https://github.com/facebook/react-native/blob/a70354df12ef71aec08583cca4f1fed5fb77d874/Libraries/Components/Touchable/TouchableOpacity.js#L249-L251
facebook-github-bot
added
the
CLA Signed
test onLongPress
2022-08-04.18-56-34.mp4 |
Base commit: b444f0e |
Base commit: b444f0e |
facebook-github-bot
added
the
Shared with Meta
|
This looks good to me, but I just wanted to confirm that you were able to test this change on iOS as well. |
fabOnReact
force-pushed
the
text-onPress-does-not-trigger-accessible
branch
from
39c269a to
93d3bc0
Compare
|
sorry, @blavalla. I had again this issue with iCloud, and I postponed testing iOS. Test before commit 4149b68 As included in the documentation pr
<View
accessible={true}
accessibilityLabel="a couple of text views">
<Text onPress={() => console.log('text one pressed')}>
text One
</Text>
<Text onPress={() => console.log('text two pressed')}>
text Two
</Text>
</View>
|
blavalla
approved these changes
Aug 31, 2022
|
@blavalla has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
|
This pull request was successfully merged by @fabriziobertoglio1987 in f3847ee. When will my fix make it into a release? | Upcoming Releases |
OlimpiaZurek
pushed a commit
to OlimpiaZurek/react-native
that referenced
this pull request
May 22, 2023
…ack (facebook#34284) Summary: >Finally, the last catch relates to why these views are considered focusable. We've been working with the assumption that they are only focusable because accessible="true", but this is not the only property that can make a view focusable on Android. Android also makes all elements with onClick listeners or onLongPress listeners focusable Adding onPress handler to a Text Component does not call setClickable(true) ([test case](facebook#30851 (comment))) facebook#30851 (comment) Pressable, TouchableOpacity, Switch, TextInput, and TouchableNativeFeedback are focusable/accessible by default without an onPress handler or accessible prop. ```jsx <TouchableOpacity /> ``` The TouchableOpacity is accessible ```jsx <TouchableOpacity accessible={false} /> ``` The TouchableOpacity is not accessible ```jsx <TouchableOpacity accessible={false} onPress={() => console.log('pressed')} /> ``` The TouchableOpacity is accessible. https://github.com/facebook/react-native/blob/a70354df12ef71aec08583cca4f1fed5fb77d874/Libraries/Components/Touchable/TouchableOpacity.js#L249-L251 This and other PRs fixes facebook#30851 ## Changelog [Android] [Fixed] - Text with onPress or onLongPress handler is not accessible with TalkBack Pull Request resolved: facebook#34284 Test Plan: main branch facebook#30 <details><summary>pr branch</summary> <p> <video src="https://user-images.githubusercontent.com/24992535/181207388-bbf8379b-71b8-44e9-b4b2-b5c44e9ac14d.mp4" width="1000" /> </p> </details> Reviewed By: cipolleschi Differential Revision: D39179107 Pulled By: blavalla fbshipit-source-id: 3301fb2b799f233660e3e08f6a87dad294ddbcd8
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Adding onPress handler to a Text Component does not call setClickable(true) (test case) #30851 (comment)
Pressable, TouchableOpacity, Switch, TextInput, and TouchableNativeFeedback are focusable/accessible by default without an onPress handler or accessible prop.
The TouchableOpacity is accessible
The TouchableOpacity is not accessible
The TouchableOpacity is accessible.
react-native/Libraries/Components/Touchable/TouchableOpacity.js
Lines 249 to 251 in a70354d
This and other PRs fixes #30851
Changelog
[Android] [Fixed] - Text with onPress or onLongPress handler is not accessible with TalkBack
Test Plan
main branch #30
pr branch
2022-07-27.17-00-33.mp4